<template>
  <div class="Login">
    <el-form :model="loginParam" ref="loginForm" label-width="65px" class="form">
      <div class="title"><p>自然语言处理平台</p></div>
      <el-form-item label="登录名" prop="name" :error="loginParam.nameError">
        <el-input v-model="loginParam.name" @input="checkName" type="text"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="密码" prop="password" :error="loginParam.passwordError">
        <el-input v-model="loginParam.password" @input="checkPassword" type="password"  @keyup.enter.native="submitForm('loginForm')" ></el-input>
      </el-form-item>
      <br />
      <el-row class="center"> 
        <el-button class="loginbtn" @click="submitForm('loginForm')">登陆</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Login",
    props: {
      msg: String
    },
    mounted: function() {},
    data() {
      return {
        loginParam: {
          name: "admin",
          password: "admin",
          nameError: "",
          passwordError: ""
        }
      };
    },
    methods: {
      checkName(value) {
        if (this.loginParam.name == "") {
          this.loginParam.nameError = "用户名不能为空！";
          return false;
        } else {
          this.loginParam.nameError = "";
        }
        return true;
      },
      checkPassword(value) {
        if (this.loginParam.password == "") {
          this.loginParam.passwordError = "密码不能为空！";
          return false;
        } else {
          this.loginParam.passwordError = "";
        }
        return true;
      },
      submitForm() {
        var _this = this;
        var checkName = this.checkName();
        var checkPassword = this.checkPassword();
        if (checkName && checkPassword) {
          POST(
            urlApi+"auth/login",
            {
              username: _this.loginParam.name,
              password: _this.loginParam.password
            },
            function(json) {
              console.log(json);
              if (json.code == 200) {
                _this.$message.success('登录成功');
                localStorage.setItem('username',_this.loginParam.name);
                _this.$store.commit("addUser", {
                  token: json.data.access_token
                });
                window.store=_this.$store;
                console.log(window.store)
                _this.$router.replace("/userManage");
              } else {
                _this.$message.error(json.message);
              }
            },
            function(err) {
              console.log(err)
              _this.$message.error("服务器错误！");
            }
          );
        }
      },
      resetForm() {
        this.loginParam.nameError = "";
        this.loginParam.passwordError = "";
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .Login {
    width: 100%;
    height: 100%;
    background:url("../assets/login1.jpg") no-repeat;
    background-size: 100% 100%;
  }
  .Login .form {
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;opacity: 0.9;
    width: 350px;
    /* border: 1px solid #ededed; */
    padding: 0 25px 25px 25px;
    border-radius: 5px;
    position: relative;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background-color:#F5F7F8;
  }
  .title{
    opacity: 0.9;
   height:60px;
    margin-bottom:40px;
    text-align: center;
     background-color:#155295;
     margin:0px -25px 35px -25px;
     padding:8px 25px;
     box-sizing: border-box;
   
  }
  .title p{
    font-size: 20px;
    height:100%;
    color: #fff;
    line-height: 50px;
 /* background:url("../assets/logo.png") no-repeat; */
   background-size: 100% 100%;
  }
  .Login label.el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .loginbtn {
    width: 100%;
    /* background-color:#7fa099; */
    color:#7fa099;
    
  }
</style>
